<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
    </div>

    <!-- 添加React的依赖 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- 开始开发 -->
    <script type="text/babel">
        // 封装App组件 
        class App extends React.Component {
            constructor() {
                super();
                // this.message = "Hello World"; 
                this.state = {
                    message: "Hello World"
                }
                // this.btnClick(); 
            }
            render() {
                return (
                    <div>
                        <h2>{this.state.message}</h2>
                        {/*
                        ===>>>>>this.btnClick.bind(this) 中 第一个this指向什么？第二个this指向什么？ 
                            第一个this指的是 App 示例对象 第二个也是一样 
                        ======>>>>绑定事件 不能加() 加了 () 是调用这个函数 
                        ======>>>>理解 绑定 和 调用。
                            绑定这个函数，是react内部调用。调用：是我们自己调用 里面的this就是我们调用的这个this是一样的 
                        ======>>>>绑定 btnClick 事件 是react内部调用，当点击后内部调用btnClick函数，执行函数中的代码，它不知道this是指向什么，所以是undefined 
                        ======>>>>所以在这里绑定事件, 都要指定事件函数中的this的指向。通常用.bind(this) 指定 事件函数中的this 是.bind(this)中的 this对象。 
                            如果是.bind(obj),事件函数中的this就是obj对象 
                        */}
                        <button onClick={this.btnClick.bind(this)}>改变文本</button>
                        
                        {/* 
                        =====>>这种情况是 绑定了一个匿名函数 触发后 执行匿名函数，函数中 有调用了 btnClick2()函数 
                        =====>>>这里是 调用函数 执行 btnClick2()函数时，btnClick2函数代码中的this 和 this.btnClick2() 前面的this是一样的，做了隐士绑定 
                        */}
                        <button onClick={() => { this.btnClick2() }}>改变文本2</button>

                    </div>
                )
            }

            btnClick() {
                // this.message = "Hello React"; 
                // this.state.message = "Hello React"; 
                // console.log(this.state); 
                //=====》》》》不改变指针的情况下这里的this指向什么？ 
                //===>>>>这里的this可以有很多可能, 当这个函数被事件绑定后，不改变this的情况下 this 是undefined 
                //===>>>>直接在 这个类/react 中 调用btnClick函数情况下，会对这个函数做一个隐士绑定，这里的this 就是 这个实例对象(比如在constructor 中调用 ) 

                console.log(this);
                this.setState({ message: "Hello React" })
            }

            btnClick2() {
                console.log(this);
            }
        }
        // 渲染组件 
        ReactDOM.render(<App />, document.getElementById("app"));

    </script>

</body>

</html>